/**
 * Created by zhangyida on 15/12/31.
 */
/* @flow */
'use strict';

import {
    StyleSheet,
    View,
    Text,
    LinkingIOS,
    TouchableOpacity,
    Navigator,
} from 'react-native'
import React from 'react';
import Communications from 'react-native-communications';
import Icon from 'react-native-vector-icons/Ionicons';
import URL from '../config/server';
import {Utils} from '../config/utils';
import {Key} from '../config/key';


const NavigationBarRouteMapper = {
    LeftButton(route, navigator, index, nextState) {
        return (
            <TouchableOpacity style={{flex: 1, justifyContent: 'center'}}
                              onPress={() => navigator.parentNavigator.pop()}>
                <View style={{flexDirection:'row',padding:5}}>
                    <Icon name="ios-arrow-back" size={18} color="#ffffff" style={{alignSelf:'center'}}/>
                    <Text style={{color: 'white', margin: 3,fontSize:16}}>
                        返回
                    </Text>
                </View>
            </TouchableOpacity>
        );
    },
    RightButton(route, navigator, index, nextState) {
        return null;
    },
    Title(route, navigator, index, nextState) {
        return (
            <Text style={{color: 'white', margin: 10, fontSize: 20}}>
                找回密码
            </Text>
        );
    }
};

export default class FindPwd extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            context: '',
            phone:'15628631550'
        }
    }

    componentWillMount() {
        let that = this;
        const FIND = URL.local + 'kefu';
        Utils.get(FIND, function (data) {
            that.setState({
                context: data.content,
                phone:data.phone
            })
        })
    }

    findPwd() {
        this.props.navigator.push({
            id: 'FindByPhone',
            message: '找回密码'
        });
    }

    renderScene(route, navigator) {
        return (
            <View style={styles.container}>
                <View style={styles.item}>
                    <Text style={styles.link} onPress={this.findPwd.bind(this)}>
                        使用手机号码重设密码{'\n'}
                    </Text>
                    <Text style={styles.p}>
                        如果您使用手机号登陆的，您可以使用手机号重置密码。
                    </Text>
                </View>
                <View style={styles.item}>
                    <TouchableOpacity onPress={() => Communications.phonecall(this.state.phone, true)}>
                        <Text style={styles.link}>
                            拨打客服热线找回密码{'\n'}
                        </Text>
                    </TouchableOpacity>
                    <Text style={styles.p}>
                        {this.state.context}
                    </Text>
                </View>
            </View>
        );
    }

    render() {
        return (
            <Navigator
                renderScene={this.renderScene.bind(this)}
                navigator={this.props.navigator}
                navigationBar={
            <Navigator.NavigationBar
                style={{backgroundColor: '#e02820', alignItems: 'center'}}
                routeMapper={NavigationBarRouteMapper} />
          }/>
        );
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 100
    },
    item: {
        height: 50,
        margin: 20
    },
    link: {
        height:25,
        fontSize: 16,
        color: '#0000cd',
        textDecorationLine: 'underline'
    },
    p: {
        fontSize: 16
    }
});
